﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>jQuery速览</title>

</head>
<body>
    <button class="show_switch">显示与隐藏</button>
    <p>点击按钮查看效果</p>
    <input type="text" id="search_data" name="search_data" value="笔记本"/>
    <button id="get_taobao_data">获取淘宝搜索建议数据</button>
    <p id="taobao_data"></p>
    <script src="Scripts/jquery-3.4.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $(".show_switch").click(function () {
                $(".show_switch+p").toggle();
            });
            $("#get_taobao_data").click(function () {
                var _url = "https://suggest.taobao.com/sug?code=utf-8";
                var _html = "";
                var _q = $("#search_data").val();
                $.ajax({
                    url: _url,
                    type: 'get',
                    data: {
                        q: _q
                    },
                    dataType: 'jsonp',
                    success: function (res) {
                        _html += "<ul>";
                        $.each(res.result, function (n, value) {
                            _html += "<li>" + value[0] + "</li>";
                        });
                        _html +="</ul>";
                        $("#taobao_data").html(_html);
                    }
                });
            });
        });
    </script>
</body>
</html>